<template>
  <div class="document-background">
    <div class="document-container">
      <h1 class="main-title">智能协作平台核心功能介绍</h1>
      <div class="content-wrapper">
        <div class="menu-column">
          <TreeMenu
            :items="menuItems"
            @select="handleMenuSelect"
          />
        </div>
        <div class="content-column">
          <div class="content-card">
            <div
              v-for="section in contentSections"
              :key="section.id"
              :id="section.id"
              class="content-section markdown-body"
            >
              <h2>{{ section.title }}</h2>
              <div v-html="section.content"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { marked } from 'marked'
import TreeMenu from './TreeMenu.vue'

// 自定义渲染器
const renderer = new marked.Renderer()

// 自定义图片渲染
renderer.image = (token) => {
  const { href, title, text } = token
  return `
    <div class="image-container">
      <img src="${href}" alt="${text}" title="${title}" />
    </div>
  `
}

// 启用 Markdown 扩展功能
marked.setOptions({
  renderer,
  gfm: true, // 启用 GitHub Flavored Markdown
  breaks: true, // 将换行符转换为 <br>
  sanitize: false, // 允许 HTML 标签
  smartypants: true // 自动转换引号、破折号等
})

const menuItems = ref([
  {
    title: '核心功能介绍',
    id: 'core_function',
    children: [
      {
        title: '智能分组',
        id: 'team_up',
      },
      {
        title: '智能分工',
        id: 'task_up',
      },
      {
        title: '实施进度监控',
        id: 'progress_monitor',
      },
      {
        title: '智能质量分析',
        id: 'analogy',
      },
      {
        title: '综合评分与智能反馈',
        id: 'score',
      }
    ]
  },
  {
    title: '产品使用流程介绍',
    id: 'usage_flow',
    children: []
  }
])

const contentSections = ref([
  { id: 'team_up', title: '智能分组', content: marked.parse('针对大学生在通识课或竞赛中组队难、成员信息不透明的问题，平台提供智能组队解决方案：\n' +
    '\n' +
    '- 教师或管理员发布任务并指定组长。\n' +
    '![创建任务](/images/edit_task.png)\n' +
    '教师可以点击创建任务，设置新任务的细节信息，创建完成后，可在任务管理中对任务进行编辑，点击“查看详情后”，获取按得分正序排列的加入任务学生名单。由教师进行组长的指定。 \n' +
    '\n' +
    '- 学生申请加入团队时，组长和申请者可相互查看历史表现与信用情况，保障组队质量。\n' +
    '![组员申请](/images/applications.png)\n' +
    '- 此功能也适用于科研团队、竞赛团队以及企业招聘场景，全面提升协作效率。')
  },
  { id: 'task_up', title: '智能分工', content: marked.parse('平台创新性地引入Deepseek大模型，实现智能化任务分工：\n' +
    '\n' +
    '- 自动拆解作业任务为具体子任务并生成兴趣调查问卷。\n' +
    '- 基于学生填写的问卷结果和兴趣偏好进行个性化分工。\n' +
    '- 提供任务完成的推荐时间线，避免传统随机分工的效率低下和不公平问题。')
  },
  { id: 'progress_monitor', title: '实施进度监控', content: marked.parse('平台支持实时任务管理与进度可视化：\n' +
    '\n' +
    '- 学生和教师可自行设定子任务内容、截止日期及责任人。\n' +
    '- 任务进度自动生成可视化甘特图，方便成员与教师随时掌握任务完成情况。\n' +
    '- 提供任务延迟预警机制，支持成员之间的进度提醒功能。')
  },
  { id: 'analogy', title: '智能质量分析', content: marked.parse('平台采用AI智能审核系统，提高作业质量：\n' +
    '\n' +
    '- 学生提交任务时，平台自动审核任务与作业需求的匹配度。\n' +
    '- 若提交内容与任务关联度低则直接反馈修改建议。\n' +
    '- 提供AI质量评分，便于学生优化和提升任务质量。\n')
  },
  { id: 'score', title: '综合评分与智能反馈', content: marked.parse('平台创新提供讨论过程评价和成员表现智能评分功能：\n' +
    '\n' +
    '- 集成腾讯会议，自动生成会议纪要并通过大模型智能分析，全面评估学生的协作表现。\n' +
    '- 学生在平台内对队友进行多维度评价（沟通交流能力、参与热情、再次合作意愿）。\n' +
    '- 自动计算学生信用值，直观反映作业过程中的表现。\n' +
    '![学生信用值](/images/my_score.png)\n' +
    '- 教师可调整各评价维度权重，获得个性化综合评分。\n' +
    '- 任务结束后，平台自动生成详细任务报告。\n' +
    '![任务质量分析](/images/task_anology.png)\n' +
    '由大模型分析并生成报告，包含学生评分分布、任务完成情况分析、教学质量评价，以及针对教师未来教学活动的个性化建议。\n' +
    '![学生评分分布](/images/student_behavior.png)\n' +
    '![教学质量评价及个性化建议](/images/teacher_behavior.png)\n' +
    '\n' +
    '通过上述智能协作功能，本平台有效地提升了大学生小组作业的效率、质量与公平性，为教师和学生提供了完善的协作体验，推动协作教学创新。')
  },
  {
    id: 'usage_flow',
    title: '产品使用流程介绍',
    content: marked.parse(`
      ## 产品使用流程

      **SparkieLink**平台的使用流程分为几个主要步骤：

      ### 1. 登录与注册
      - 用户可通过平台提供的登录/注册入口进行账号创建与登录。用户需提供必要的信息，如用户名、密码、邮箱等。
      - 成功登录后，系统会根据用户的角色（教师/学生）展示不同的操作界面。

      ### 2. 创建任务
      - 管理员（或教师）通过任务管理界面创建新任务。
      - 任务创建时，管理员需设置任务的基本信息，包括任务标题、任务描述、任务截止日期等。
      - 创建完成后，管理员可以设定组员人数、评分标准等任务详情，并上传相关附件。

      ### 3. 智能分组与组队
      - 管理员发布任务后，平台会根据历史数据和能力值自动推荐合适的组长。
      - 学生根据个人兴趣和能力值选择组长，并提交组队申请。
      - 组长审核申请并完成组队。
      - 完成组队后，平台为每个小组提供智能分工和任务分配。

      ### 4. 任务分工与智能分配
      - 在任务发布后，平台将自动拆解任务并生成子任务。
      - 学生填写兴趣问卷，系统根据学生兴趣和能力分配子任务。
      - 每个学生根据兴趣和能力被匹配到最合适的任务。

      ### 5. 进度监控与提醒
      - 每个任务及其子任务会以甘特图形式呈现，任务进度清晰可见。
      - 系统会根据任务的进度自动进行提醒，避免任务逾期。
      - 管理员和学生可以查看任务的实时进展，确保任务按时完成。

      ### 6. 任务提交与质量反馈
      - 学生在完成子任务后提交成果，系统会自动进行语义分析与质量评分。
      - 若任务质量不符合要求，系统会提出修改建议，帮助学生优化任务。
      - 教师可以查看学生的任务评分及任务质量分析报告。

      ### 7. 评分与反馈
      - 系统自动生成学生的综合评分，并根据团队协作情况给予反馈。
      - 教师可以根据评分维度调整评分标准，提供个性化反馈。
      - 最终生成任务报告，并为教师提供后续教学建议。

      ### 8. 结果展示与改进建议
      - 所有任务的完成情况与评分将自动生成报告。
      - 通过平台的数据分析，教师可以获得学生的表现分布、任务完成情况及教学质量反馈。
    `)
  }
])

const handleMenuSelect = (id) => {
  const element = document.getElementById(id)
  if (element) {
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  }
}
</script>

<style scoped>
.document-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;
}

.document-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.main-title {
  font-size: 24px;
  font-weight: bold;
  color: blue;
  font-family: 'Sariel', sans-serif;
  margin-bottom: 20px;
  text-align: center;
}

.content-wrapper {
  display: flex;
  width: 100%;
  max-width: 1200px;
}

.menu-column {
  width: 240px;
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 15px;
  margin-right: 20px;
  overflow-y: auto;
}

.content-column {
  flex: 1;
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 25px;
  overflow-y: auto;
  max-height: 80vh;
}

.content-card {
  max-width: 800px;
  margin: 0 auto;
}

.content-section {
  margin-bottom: 40px;
  padding: 20px;
  background: rgba(245,247,250,0.5);
  border-radius: 8px;
  transition: transform 0.3s ease;
  scroll-margin-top: 20px;
  color: #333; /* 添加默认文字颜色 */
}

.content-section h2 {
  color: #2c3e50;
  border-left: 4px solid #3498db;
  padding-left: 10px;
}

.content-section p,
.content-section li {
  color: #333 !important; /* 修改文字颜色并添加 !important */
  line-height: 1.6 !important;
  text-align: left !important;
}

.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
  text-align: left;
  color: #333; /* 添加默认文字颜色 */
}

.markdown-body h2 {
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
  text-align: left; /* 标题靠左 */
}

.markdown-body ul {
  padding-left: 2em;
  text-align: left; /* 列表靠左 */
}

.markdown-body li {
  margin-bottom: 0.5em;
  text-align: left; /* 列表项靠左 */
}

/* 修改图片样式 */
::v-deep(.markdown-body) img {
  display: block; /* 关键：确保图片是块级元素 */
  max-width: 80% !important;
  height: auto !important;
  margin: 20px auto !important; /* 上下20px间距 + 水平居中 */
  padding: 10px; /* 可选：添加内边距 */
  background: #f8f9fa; /* 可选：浅色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 确保父容器允许居中 */
::v-deep(.markdown-body) {
  width: 100%;
  max-width: 800px; /* 限制父容器宽度 */
  margin: 0 auto; /* 父容器自身居中 */
}

/* 响应式样式 */
@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
</style>